import React, { useState } from 'react';
import {
  Card,
  ConfigProvider,
  Input,
  Select,
  Space,
  Table,
  Form,
  Button,
  Collapse,
  Row,
  Col,
} from 'antd';
import styles from './index.less';
import type { ColumnsType } from 'antd/es/table/interface';
import { useMount } from 'ahooks';
import GradeComparison from './components/GradeComparison';
interface DataType {
  key: string;
  id: string; //序号
  stuName: string;
  stuNumber: string;
  className: number;
  Grade: string;
  majiorName: string;
  undergraduateMentorName: string;
  year1Grade: number;
  year2Grade: number;
  year3Grade: number;
  year4Grade: number;
}

const physicalFitness: React.FC<any> = () => {
  const { Column, ColumnGroup } = Table;
  const { Panel } = Collapse;
  const [records, setRecords] = useState<any>([
    {
      key: 1,
      id: 1,
      className: '新能222',
      stuName: '彭月娇',
      stuNumber: '221594',
      Grade: '2022',
      majiorName: '新能',
      undergraduateMentorName: '张雪辉',
      year1Grade: 11,
      year2Grade: 22,
      year3Grade: 33,
      year4Grade: 44,
    },
    {
      key: 2,
      id: 2,
      className: '新能222',
      stuName: '郭胜',
      stuNumber: '221602',
      Grade: '2022',
      majiorName: '新能',
      undergraduateMentorName: '张雪辉',
      year1Grade: 55,
      year2Grade: 66,
      year3Grade: 77,
      year4Grade: 88,
    },
  ]);
  return (
    <div>
      <Card
        title={
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>体测成绩列表</span>
        }
      >
        <Form layout={'inline'}>
          <Form.Item label="学号" name="stuNumber">
            <Input style={{ width: 150 }} allowClear={true}></Input>
          </Form.Item>
          <Form.Item label="姓名" name="stuName">
            <Input style={{ width: 150 }} allowClear={true}></Input>
          </Form.Item>
          <Form.Item label="班级" name="className">
            <Input style={{ width: 150 }} allowClear={true}></Input>
          </Form.Item>
          <Form.Item label="年级" name="grade">
            <Select style={{ width: 150 }} allowClear={true}>
              <Option value={'2017'}>2017</Option>
              <Option value={'2018'}>2018</Option>
              <Option value={'2019'}>2019</Option>
              <Option value={'2020'}>2020</Option>
              <Option value={'2021'}>2021</Option>
              <Option value={'2022'}>2017</Option>
              <Option value={'2023'}>2018</Option>
              <Option value={'2024'}>2019</Option>
              <Option value={'2025'}>2020</Option>
              <Option value={'2026'}>2021</Option>
              <Option value={'2027'}>2017</Option>
              <Option value={'2028'}>2018</Option>
              <Option value={'2029'}>2019</Option>
            </Select>
          </Form.Item>
          <Form.Item label="专业" name="majiorName">
            <Select style={{ width: 150 }} allowClear={true}>
              <Option value={0}>新能</Option>
              <Option value={1}>电气</Option>
            </Select>
          </Form.Item>
          <Form.Item label="班导师" calssName="undergraduateMentorName">
            <Input style={{ width: 150 }} allowClear={true}></Input>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <Card>
        <Table dataSource={records}>
          <Column title="序号" dataIndex="key" key="key" align="center" />
          <Column
            title="姓名"
            dataIndex="stuName"
            key="stuName"
            align="center"
          />
          <Column
            title="学号"
            dataIndex="stuNumber"
            key="stuNumber"
            align="center"
          />
          <Column
            title="班级"
            dataIndex="className"
            key="className"
            align="center"
          />
          <Column title="年级" dataIndex="Grade" key="Grade" align="center" />
          <Column
            title="专业"
            dataIndex="majiorName"
            key="majiorName"
            align="center"
          />
          <Column
            title="班导师"
            dataIndex="undergraduateMentorName"
            key="undergraduateMentorName"
            align="center"
          />
          <ColumnGroup title="体测成绩">
            <Column
              title="第一学年"
              dataIndex="year1Grade"
              key="year1Grade"
              align="center"
            />
            <Column
              title="第二学年"
              dataIndex="year2Grade"
              key="year2Grade"
              align="center"
            />
            <Column
              title="第三学年"
              dataIndex="year3Grade"
              key="year3Grade"
              align="center"
            />
            <Column
              title="第四学年"
              dataIndex="year4Grade"
              key="year4Grade"
              align="center"
            />
          </ColumnGroup>
        </Table>
      </Card>

      <Card
        title={
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>
            班级体测成绩对比
          </span>
        }
      >
        <Row gutter={8}>
          <Col span={12}>
            <Collapse defaultActiveKey={['1']}>
              <Panel header={'专业：'} key="1" forceRender>
                <ConfigProvider>
                  <GradeComparison />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
    </div>
  );
};
export default physicalFitness;
